<template>
  <div class="contents">
    <PanelTitle title="质检分析" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore()
const maps = ref(null);
onMounted(async () => {
  let entId = baseStore.base.createEntId
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/checkup/task/statist",
    method: "get",
    params: { entId: entId ? entId : 0 },
  });
  
  
  let pieData = [
    // { value: res.data.totalNum, name: "总数" },
    { value: res.data.passNum, name: "通过", ratio: res.data.passNumRatio },
    { value: res.data.noPassNum, name: "不通过" , ratio: res.data.noPassNumRatio },
    // { value: 29.79, name: "自然人主体" },
    // { value: 38.38, name: "其他" },
  ];

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      data: ["总数", "通过", "不通过"],
      textStyle: {
        fontSize: fitChartSize(8),
        color: "#fff",
      },
    },
    tooltip: {
      trigger: 'item',
    },
    color: ["#00C0FF", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    // title: {
    //   text: "单位：亩",
    //   textStyle: {
    //     fontSize: fitChartSize(9),
    //     fontWeight: "bold",
    //     color: "#fff",
    //   },
    //   right: fitChartSize(10),
    //   // subtext: 'Fake Data',
    //   // left: 'center'
    // },
    series: [
      {
        type: "pie",
        radius: [30, 60],
        center: ["50%", "50%"],
        // roseType: "area",
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(10),
          length2: fitChartSize(54),
          lineStyle: {
            color: "#fff",
          },
        },
        labelLayout: {
          width: fitChartSize(90),
          verticalAlign: "bottom",
          align: "center",
          // dy: fitChartSize(-4),
          // dx: -40,
        },
        label: {
          show: true,
          borderWidth: 10,
          formatter: '{b} {d} %',
          color: '#fff'
        },
        data: pieData,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}
</style>